<template>
	<view class="page" v-if="list.length>0" style="background-image: url(https://img.jinghushi.com/images/9/2024/07/CyERhesS5Dkw455de2rz2wtAHezAlq.png);">
		<view class="top">
			<image src="/static/index/xsms.png" mode="widthFix"></image>
			<view class="lfm">
				<image src="/static/index/nz.png" mode="widthFix"></image>
				<view>轮番秒</view>
			</view>
			<view class="more" @click="$navTo('/pages/mallHome/index')">限时抢购 查看更多></view>
		</view>
		<scroll-view class="list" scroll-x="true">
			<view class="item" v-for="item in list" @click="$navTo('/pages/product/product?id='+item.id)">
				<view class="logo">
					<image class="logos" :src="item.thumb"></image>
					<!-- <view class="tag" style="background-image: url(https://img.jinghushi.com/images/9/2024/04/MSB0YpYbdSySs9b1sF3s1xZ2128638.png);">￥{{item.saleprice}}</view> -->
					<!-- <view class="djs">
						<uni-countdown :show-day="false" :hour="hour(item.times)" :minute="minute(item.times)"
						:second="second(item.times)" splitorColor="#fff" :font-size="12" color="#fff"/>
					</view> -->
				</view>
				<view class="content">
					<view class="title clamp">{{item.title}}</view>
					<view class="price">
						<text class="p_tag">秒杀价</text><text class="new"><text class="small">￥</text>{{item.saleprice}}</text>
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		created() {
			this.getList()
		},
		methods: {
			getList(){
				this.$axios('home/getCurSkill', 'POST', 'shop').then(res=>{
					if(res.data.code==200){
						this.list = res.data.data.goodsList0;
					}
				})
			},
			second(v) {
				return Math.trunc(v % 60);
			},
			minute(v) {
				return Math.trunc(v / 60 % 60);
			},
			hour(v) {
				return Math.trunc(v / 60 / 60 % 24);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 20rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// margin: 20rpx 0;
		// margin-bottom: 0;
		height: 344rpx;
	}
	.top{
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		margin-bottom: 20rpx;
		align-items: center;
		image{
			width: 180rpx;
			margin-right: 20rpx;
		}
		.lfm{
			flex: 1;
			font-size: 20rpx;
			position: relative;
			image{
				width: 50rpx;
				margin-right: 0;
				position: absolute;
				top: -10rpx;
				left: -10rpx;
			}
			view{
				background: #8615E1;
				border-radius: 15rpx;
				width: 116rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding-left: 44rpx;
			}
		}
		.more{
			font-size: 24rpx;
			margin-top: -24rpx;
		}
	}
	.list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		white-space: nowrap;
		margin-right: -10rpx;
			.item{
				// background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				display: inline-block;
				margin-right: 20rpx;
				width: 208rpx;
				.logo{
					width: 100%;
					height: 160rpx;
					position: relative;
					border-radius: 10rpx;
					overflow: hidden;
					.logos{
						width: 100%;
						height: 100%;
						display: block;
					}
					.tag{
						position: absolute;
						width: 80rpx;
						height: 30rpx;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
						text-align: center;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						padding-left: 6rpx;
					}
					.djs{
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background: rgba(#000, .5);
						padding: 0 15rpx;
					}
				}
				.content{
					// padding: 5rpx 12rpx 10rpx;
					.title{
						font-size: 26rpx;
						font-weight: 600;
						line-height: 46rpx;
					}
					.price{
						display: flex;
						align-items: center;
						.p_tag{
							padding: 2rpx;
							line-height: 28rpx;
							background: #8615E1;
							border-radius: 4rpx;
							color: #FFFFFF;
							text-align: center;
							font-size: 20rpx;
						}
						.new{
							font-weight: bold;
							font-size: 28rpx;
							color: #AF141D;
							.small{
								font-size: 20rpx;
							}
						}
						.old{
							text-decoration: line-through;
							color: #bec4d4;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	
</style>